import React, { useCallback, useState, useEffect } from 'react'
import styles from './Case.module.scss'

import CaseImage from './CaseImage'
import CaseAudio from './CaseAudio'
import CaseText from './CaseText'
import CaseReasoning from './CaseReasoning'

import PaginationDefault from './PaginationDefault'

// 返回类型
const getUrlType = (res) => {
  // audio_path   imgPath
  if (res?.audio_path) {
    return 'audio_path'
  }
  if (res?.imgPath) {
    return 'imgPath'
  }
  if (res?.text) {
    return 'text'
  }
  if (res?.inference_path) {
    return 'inference_path'
  }
  return ''
}

const Case = ({ urlList = [], reinforceType }) => {
  console.log(2333, urlList.length, reinforceType, urlList[0])

  const [current, setCurrent] = useState(0)
  const [currentData, setCurrentData] = useState(urlList[0])
  const urlType = getUrlType(currentData)
  useEffect(() => {
    setCurrent(0)
    setCurrentData(urlList[0])
  }, [urlList])
  // 切换案例
  const handleSwitchCase = useCallback(
    (curr) => {
      setCurrent(curr)
      setCurrentData(urlList[curr])
    },
    [urlList]
  )

  return (
    <div className={styles.caseBox}>
      <div className={styles.title}>加固案例：</div>
      {urlType === 'imgPath' && (
        //<CaseReasoning data={currentData} reinforceType={reinforceType} />
        <CaseImage data={currentData} reinforceType={reinforceType} />
      )}
      {urlType === 'audio_path' && (
        <CaseAudio data={currentData} reinforceType={reinforceType} />
      )}
      {urlType === 'text' && (
        <CaseText data={currentData} reinforceType={reinforceType} />
      )}
      {urlType === 'inference_path' && (
        <CaseReasoning data={currentData} reinforceType={reinforceType} />
      )}
      <PaginationDefault
        current={current}
        total={urlList.length}
        handleSwitchCase={handleSwitchCase}
      />
    </div>
  )
}
export default Case
